
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>二维码扫描效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .button-container {
            width: 100%;
            height: 5%;
            position: fixed;
            bottom: 0px;
            left: 50%;
            background-color: black;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 90px;
        }

        .button {
            background-color: black;
            color: white;
            margin: auto;
            margin-left: 200px;
            font-size: 20px;
            width: 200px;

            text-decoration: underline;

            text-decoration-color: white;
        }

        .file-input {
            display: none;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="button-container">
    <label class="button" for="scanButton">扫一扫</label>
    <label class="button" for="fileInput">选取本地照片</label>
    <input class="file-input" id="fileInput" type="file">
</div>

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var fileInput = document.getElementById('fileInput');

    // 设置Canvas尺寸
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 设置扫码框的尺寸和位置
    var boxSize = Math.min(canvas.width, canvas.height) * 0.6; // 扫码框的大小为屏幕宽高的60%
    var boxX = (canvas.width - boxSize) / 2; // 扫码框的水平位置
    var boxY = (canvas.height - boxSize) / 2; // 扫码框的垂直位置

    // 加载二维码图片
    var qrCodeImage = new Image();
    qrCodeImage.src = '/base/img/pg.jpg'; // 将"path_to_qrcode_image.png"替换为实际二维码图片的路径

    qrCodeImage.onload = function() {
        // 绘制黑色背景
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 在Canvas上绘制二维码图片
        ctx.drawImage(qrCodeImage, boxX, boxY, boxSize, boxSize);

        // 绘制透明扫码框
        ctx.strokeStyle = 'rgba(0, 0, 0, 0)'; // 透明边框
        ctx.lineWidth = 2;
        ctx.strokeRect(boxX, boxY, boxSize, boxSize);

        // 绘制红色扫描线
        var scanLineY = boxY; // 扫描线的初始位置为扫码框的顶部

        function animateScanLine() {
            ctx.clearRect(boxX, boxY, boxSize, boxSize); // 清除扫码框内部的内容

            // 绘制黑色背景
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 在Canvas上绘制二维码图片
            ctx.drawImage(qrCodeImage, boxX, boxY, boxSize, boxSize);

            // 绘制透明扫码框
            ctx.strokeStyle = 'rgba(0, 0, 0, 0)'; // 透明边框
            ctx.lineWidth = 2;
            ctx.strokeRect(boxX, boxY, boxSize, boxSize);

            // 绘制红色扫描线
            ctx.beginPath();
            ctx.strokeStyle = 'green';
            ctx.lineWidth = 4; // 将线宽增加到4个像素
            ctx.moveTo(boxX, scanLineY);
            ctx.lineTo(boxX + boxSize, scanLineY);
            ctx.stroke();

            scanLineY += 2; // 控制扫描线的速度

            if (scanLineY < boxY + boxSize) {
                requestAnimationFrame(animateScanLine); // 继续动画
            } else {
                scanLineY = boxY; // 扫描线到达底部后重置到顶部
                requestAnimationFrame(animateScanLine); // 继续动画
            }
        }

        animateScanLine(); // 开始扫描线的动画
    };


    // 选取本地照片按钮点击事件
    // 选取本地照片按钮点击事件
    fileInput.addEventListener('change', function(event) {
        var file = event.target.files[0];

        // 读取选取的照片
        var reader = new FileReader();
        reader.onload = function(e) {
            var image = new Image();
            image.onload = function() {
                // 在选取的照片加载完成后，跳转到另一个页面，并传递文件名称作为参数值
                var fileName = file.name;
                window.location.href = 'http://localhost:8080/base/info/product-info?ncpid=ncp001-qy001';
            };
            image.src = e.target.result;
        };
        reader.readAsDataURL(file);
    });



</script>
</body>
</html>

